<head>
  <script>
    window.__unocss = {
      runtime: {
        bypassDefined: true,
      },
    }
  </script>
  <script src="../attributify.global.js"></script>
  <style>
    [un-cloak] {
      display: none;
    }
    /* with bypassDefined, unocss will not generate this */
    .text-red {
      font-style: italic;
      color: red;
    }
  </style>
</head>

<body p10 font-sans un-cloak>
  <div id="hi" class="text-red" font="bold" text="xl" animate-bounce>Hello</div>
  <button id="btn">Change Color</button>
</body>

<script>
  const colors = ['red', 'teal', 'orange', 'sky']
  let index = 0

  const hi = document.getElementById('hi')
  const btn = document.getElementById('btn')

  btn.addEventListener('click', () => {
    index = (index + 1) % colors.length
    hi.className = `text-${colors[index]}`
  })
</script>
